<script setup>
import { ref,watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import {useTokenStore} from '@/stores/token.js'
import useUserInfoStore from '@/stores/userInfo.js'
const router = useRouter();
const tokenStore = useTokenStore();
const userInfo = useUserInfoStore();
const get_login = () => {
  const user_data = userInfo.info
  const user_token = tokenStore.token
  console.log(user_data.status);
  console.log(user_token);
  if(!user_token || user_data.status != '2'){
    // console.log('未登录');
    router.push('/login')
  }
};
get_login();
const activeMenu = ref('userProfile'); // 默认选中的菜单项

const activeIndex2 = ref(router.path);
watchEffect(() => {
  activeIndex2.value = router.path;  // 每当路由变化时，更新菜单的选中状态
});
// 路由跳转处理
const handleMenuClick = (menuName) => {
  activeMenu.value = menuName;
  router.push({ name: menuName });  // 根据菜单项跳转到对应的路由
};


</script>

<template>
  <el-row>
    <el-col :span="2"></el-col>
    <!-- 左侧菜单栏 -->
    <el-col :span="4">
      <el-menu 
      :default-active="activeMenu" 
      router 
      class="menu"
      background-color="#f5f5f5" 
      text-color="#2c3e50" 
      active-text-color="#3498db">
        <el-menu-item index="userProfile">
          <i class="el-icon-user"></i> 个人信息
        </el-menu-item>
        <el-menu-item index="userhistory">
          <i class="el-icon-time"></i> 历史预约
        </el-menu-item>
        <el-menu-item index="userReviews">
          <i class="el-icon-chat-dot-square"></i> 我的评论
        </el-menu-item>
        <el-menu-item index="userMessage">
          <i class="el-icon-bell"></i> 通知列表
        </el-menu-item>
      </el-menu>
    </el-col>

    <!-- 右侧内容显示区域 -->
    <el-col :span="18">
      <el-container class="content-container">
        <router-view></router-view>  <!-- 根据当前路由显示不同内容 -->
      </el-container>
    </el-col>
  </el-row>
</template>

<style scoped>
/* 整体布局 */
.el-row {
  height: 100vh;
}

/* 左侧菜单栏样式 */
.menu {
  width: 100%;
  max-width: 250px; /* 设置最大宽度以减少长度 */
  height: 60%; /* 去除菜单过长的高度 */
  border-right: 1px solid #ddd;
  padding-top: 0; /* 去除上边距 */
  background-color: #f5f5f5; /* 浅色背景 */
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.1);
}

.el-menu-item {
  font-size: 16px;
  padding: 12px 20px;
  border-radius: 4px;
}

.el-menu-item:hover {
  background-color: #ecf0f1;
}

.el-menu-item i {
  margin-right: 10px;
}

/* 右侧内容区域 */
.content-container {
  padding: 20px;
  background-color: #ecf0f1;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
  margin-top: 20px; /* 保持右侧内容区域与顶部的间距 */
}

.el-row .el-col {
  padding: 0;
}

/* 自定义菜单的选中状态样式 */
.el-menu-item.is-active {
  background-color: #3498db !important;
  color: #fff !important;
}

.el-menu {
  border: none;
}
</style>
